<template>
	<view class="login-page">
		<!-- <z-nav-bar></z-nav-bar> -->
		<!-- 公共组件-每个页面必须引入 -->
		<!--<public-module></public-module>-->
		<view class="title">教师登录</view>
		<view class="form-wrap">
			<uni-forms ref="form" :value="formData" :rules="rules" validate-trigger="bind">
				<uni-forms-item name="username" required>
					<uni-easyinput type="text" v-model="formData.username" placeholder="请输入工号" />
				</uni-forms-item>
				<uni-forms-item name="password" required>
					<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item name="code" required>
					<uni-row>
						<uni-col :span="18"><input type="text" v-model="formData.code" class="uni-input-border"
								@blur="binddata('code', $event.detail.value)" placeholder="请输入验证码" /></uni-col>
						<uni-col :span="6">
							<image :src="yzmPic" style="width: 100px; height: 49px;"></image>
						</uni-col>
					</uni-row>


				</uni-forms-item>
				<view class="tips-box">
					<!-- <uni-row> -->
						<text  @click="onPageJump('/subpages/user/forget')">忘记密码?</text>
						<!-- 	<uni-col :span="11">忘记密码</uni-col>
						<uni-col :span="2"><text>|</text></uni-col>
						<uni-col :span="11">立即注册</uni-col> -->
					<!-- </uni-row> -->
				</view>
				<button :disabled="disabled" :loading="loading" @click="submit">登录</button>
				<view class="agree-box">
					使用即视为同意<text @click="onPageJump('/subpages/user/protocol')">《用户协议》</text>
					和<text @click="onPageJump('/subpages/user/protocol')">《隐私政策》</text>
				</view>
			</uni-forms>
			<view class="ft" >
				<image :src="illustration" mode="widthFix"></image>
			</view>
		</view>

	</view>
</template>

<script>
	import md5 from '@/plugins/md5';
	let clear;
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import socket from '@/config/socket';
	export default {
		data() {
			return {
				phoneNo: '',
				yzmPic: '',
				illustration: require('@/static/illustration/teacher.png'),
				disabled: true,
				loading: false,
				checked: false,
				formData: {
					username: null, //工号
					password: null, //密码
					code: '',
					uuid: '',
				},
				rules: {
					// 对jobNum字段进行必填验证
					username: {
						rules: [{
							required: true,
							errorMessage: '请输入工号'
						}, {
							minLength: 3,
							maxLength: 15,
							errorMessage: '工号长度在 {minLength} 到 {maxLength} 个字符'
						}]
					},
					// 对password字段进行必填验证
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码'
						}, ]
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码'
						}]
					}
				}
			};
		},
		watch: {
			"formData.username"(newVal, oldVal) {
				this.formValidation()
			},
			"formData.password"(newVal, oldVal) {
				this.formValidation()
			},
			"formData.code"(newVal, oldVal) {
				this.formValidation()
			},
		},
		computed:{
			
		},
		//第一次加载
		onLoad(e) {
			// #ifdef APP-PLUS
			this.isIos = plus.os.name == 'iOS';
			// #endif
			this.getCaptchaImage()
		},
		//页面显示
		onShow() {},
		//方法
		methods: {
			getCaptchaImage() {
				this.$api.login.getCaptchaImage().then(res => {
					const {
						img,
						uuid
					} = res
					this.yzmPic = 'data:image/png;base64,' + img
					this.formData.uuid = uuid
				}).catch(err => {

				})
			},
			...mapMutations(['setUserInfo']),
			formValidation() {
				let {
					username,
					password,
					code
				} = this.formData
				this.disabled = !(username && password && code)
			},
			submit() {
				// 手动提交表单
				this.$refs.form
					.submit()
					.then(res => {
						this.loading = true
						this.disabled = true
						this.$api.login.teacherLogin(this.formData).then(res => {
								this.loading = false
								this.disabled = false
								const {avatarUrl,nickname,token,username,userId,params} = res.data.eduWxAccount
									this.setUserInfo({
										token:res.data.token,
									    avatarUrl: avatarUrl,  
										userId:userId,
									    nickname:nickname ,  
									    userName:username ,  
									    isLogin: true,  
										params:params,
									})
								uni.showToast({
									icon: 'success',
									title: '登陆成功'
								})
								uni.switchTab({
								   url: '/pages/my/my'
								});
						}).catch(err => {
							console.log(`登陆失败`,err)
								uni.showToast({
									icon: 'none',
									title: `登陆失败，${err.errMsg}`
								})
								this.getCaptchaImage()
								this.loading = false
						})
					})
					.catch(err => {
						console.log('表单错误：', err);
					});
			},
			onPageJump(url) {
				console.log(url)
				uni.navigateTo({
					url: url
				});
			},
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.login-page {
		padding: calc(var(--status-bar-height) + 70upx) 50upx 50upx 50upx;
		background-color: #fff;
		min-height: 100vh;

		.title {
			font-weight: 500;
			font-size: 24px;
			line-height: 1;
		}

		.form-wrap {
			margin-top: 100rpx;

			text {
				color: $uni-theme-color;
			}

			checkbox {
				border-radius: 40px;
			}

			.agree-box {
				text-align: center;
				margin-top: 16px;
				font-size: 13px;
			}

			.tips-box {
				color: rgba($color: $uni-text-color-grey, $alpha: 1);
				text-align: right;
				margin-bottom: 24px;
				font-size: 13px;

				text {
					color: rgba($color: $uni-text-color-grey, $alpha: 0.5);
				}
			}
		}

		.ft {
			position: fixed;
			left: 50%;
			margin-left: -40%;
			bottom: 0;
			width: 80%;
			height: auto;

			image {
				width: 100%;
			}
		}
	}

	.uni-input-border {
		padding: 0 10px;
		height: 49px;
		width: 100%;
		font-size: 14px;
		background-color: #F1F1F1;
		color: #666;
		border: 0;
		border-radius: 49px;
		box-sizing: border-box;
	}
</style>
